<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>编辑员工</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
      </template>

      <el-form
        ref="form"
        :model="employeeForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="employeeForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="employeeNo">
              <el-input v-model="employeeForm.employeeNo" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentId">
              <el-tree-select
                v-model="employeeForm.departmentId"
                :data="departmentOptions"
                :props="{label: 'name', value: 'id'}"
                placeholder="请选择部门"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input v-model="employeeForm.position" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="employeeForm.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="employeeForm.email" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入职日期" prop="entryDate">
              <el-date-picker
                v-model="employeeForm.entryDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="employeeForm.status">
                <el-radio :label="1">在职</el-radio>
                <el-radio :label="0">离职</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getEmployeeDetail, updateEmployee } from '@/api/employee'

export default defineComponent({
  name: 'EmployeeEdit',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const form = ref(null)

    const employeeForm = reactive({
      id: undefined,
      name: '',
      employeeNo: '',
      departmentId: '',
      position: '',
      phone: '',
      email: '',
      entryDate: '',
      status: 1
    })

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      employeeNo: [{ required: true, message: '请输入工号', trigger: 'blur' }],
      departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
      position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
      entryDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }]
    }

    const departmentOptions = ref([])

    const getDetail = async () => {
      try {
        const { data } = await getEmployeeDetail(route.params.id)
        Object.assign(employeeForm, data)
      } catch (error) {
        console.error('获取员工详情失败:', error)
        ElMessage.error('获取员工详情失败')
      }
    }

    const submitForm = async () => {
      if (!form.value) return
      try {
        await form.value.validate()
        await updateEmployee(employeeForm.id, employeeForm)
        ElMessage.success('更新成功')
        router.go(-1)
      } catch (error) {
        console.error('更新员工失败:', error)
        ElMessage.error('更新失败')
      }
    }

    onMounted(() => {
      getDetail()
    })

    return {
      form,
      employeeForm,
      rules,
      departmentOptions,
      submitForm
    }
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>